<template>
  <div>
    <!--新增-->
    <el-dialog title="新增"  :visible.sync="informstatus" width="80%">
      <el-form ref="inform"  :rules="inrules" :model="inform"  >
        <el-form-item label="专区名称" prop="pname">
          <el-input v-model="inform.pname" placeholder="专区名称" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="pdescribe">
          <el-input v-model="inform.pdescribe" placeholder="描述" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                        <el-button @click="inquxiaoup">取 消</el-button>
                        <el-button type="primary" @click="insaveupForm" >确 定</el-button>
                    </span>
    </el-dialog>
    <!--修改-->
    <el-dialog title="修改信息"  :visible.sync="upformstatus" width="80%">
      <el-form ref="upform" :rules="uprules"  :model="upform"  >
        <el-form-item label="序号" prop="pid"  style="display: none" >
          <el-input v-model="upform.pid" placeholder="序号"></el-input>
        </el-form-item>
        <el-form-item label="专区名称" prop="pname">
          <el-input v-model="upform.pname" placeholder="专区名称" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="pdescribe">
          <el-input v-model="upform.pdescribe" placeholder="描述" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="upform.sort" placeholder="排序" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                        <el-button @click="upquxiaoup">取 消</el-button>
                        <el-button type="primary" @click="upsaveupForm" >确 定</el-button>
                    </span>
    </el-dialog>

    <!--  搜索框-->
    <el-form :inline="true" :model="formInline" ref="formInline" style="padding-top: 30px">
      <el-form-item label="讲师名称">
        <el-input v-model="formInline.pname" placeholder="讲师名称"></el-input>
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>查询</el-button>
        <el-button type="primary" @click="Reset"><i class="el-icon-refresh"></i>重置</el-button>
        <el-button type="primary" @click="inserts"><i class="el-icon-refresh"></i>添加</el-button>
      </el-form-item>
    </el-form>
    <!--  表单-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="pid"
          label="序号">
      </el-table-column>
      <el-table-column
          prop="pname"
          label="专区名称">
      </el-table-column>
      <el-table-column
          prop="pdescribe"
          label="专区描述">
      </el-table-column>

      <el-table-column
          prop="sort"
          label="排序">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              :active-value="0"
              :inactive-value="1"
              active-text="启用"
              inactive-text="禁用"
              @change="changeStatus(scope.row.pid,scope.row.status)"
              inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="danger" size="small">删除</el-button>
          <el-button type="primary" size="small" @click="fenchengClick(scope.row)">修改</el-button>
          <el-button type="success" size="small" @click="kecheng(scope.row)">专区课程</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Preinct",
  data(){
    return{
      //分页
      currentPage:1,
      pageSize:5,
      total:0,
      //查询表单
      formInline:{
      },

      //表格数据
      tableData:[],
      value:1,

      //修改信息框
      upform: {},
      upformstatus:false,

      //修改分成
      informstatus:false,
      inform:{},
      uprules:{
        pname:[
          { required: true, message: '请输入专区名称', trigger: 'blur' },
        ],
        pdescribe:[
          { required: true, message: '请输入专区描述', trigger: 'blur' },
        ],
        sort:[
          { required: true, message: '排序最起码是个0吧', trigger: 'blur' },
        ]
      },
      inrules:{
        pname:[
          { required: true, message: '请输入专区名称', trigger: 'blur' },
        ],
        pdescribe:[
          { required: true, message: '请输入专区描述', trigger: 'blur' },
        ],

      },
    }
  },
  //初始化
  created() {
    this.init();
  },
  methods:{
    init(){

      var that = this;
      this.$http.post('/home/precinct/getAllPrecinct/'+this.currentPage+"/"+this.pageSize,this.formInline).then(function (resp){
        that.tableData=resp.data.result.records
        that.total=resp.data.result.total
      })
    },
    //分页改变
    handleSizeChange(val) {
      this.pageSize=val;
      this.init();
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      this.init();
    },
    //查询
    onSubmit(){
      this.init()
    },
    //重置查询表
    Reset(){
      this.$refs.formInline.resetFields();
      this.formInline={}
    },
    //新增
    inserts(){
      this.informstatus=true;
    },


    //  修改表单操作=========================================

    //表格方法============================================================
    //删除
    handleClick(item){
      var that = this
      console.log(item.pid)
      var id= item.pid
      this.$http.get('/home/precinct/deletePrecinct?pId='+id).then(function (resp){
        if(resp.data.code==200){
          that.init()
        }
      })
    },
    //修改
    fenchengClick(item){
      this.upform=item;
      this.upformstatus=true
    },
    //修改状态
    changeStatus(id,status){
      var that = this;
      this.$http.get('/home/precinct/updateAStatus?id='+id+"&status="+status).then(function (resp) {
        if(resp.data.code==200){
          that.init()
        }
      })
    },
    //修改取消
    upquxiaoup(){
      this.upformstatus=false;
      this.upform={};
      this.$refs.upform.resetFields();
    },
    //修改确认
    upsaveupForm(){
      var that = this;
      this.$refs.upform.validate((valid) => {
        if (valid) {
          this.$http.post(`/home/precinct/updatePrecinct`,this.upform).then(function (resp){
            if(resp.data.code==200){
              that.init()
              that.upformstatus=false;
              that.upform={};
              that.$refs.upform.resetFields();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //新增====================================================
    inquxiaoup(){
      this.informstatus=false;
      this.$refs.inform.resetFields();
      this.inform={};
    },
    insaveupForm(){
      var that = this;
      this.$refs.inform.validate((valid) => {
        if (valid) {
          this.$http.post(`/home/precinct/insertPercinct`,this.inform).then(function (resp){
            if(resp.data.code==200){
              that.init()
              that.informstatus=false;
              that.inform={};
              that.$refs.inform.resetFields();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    kecheng(item){
      var that= this;
      console.log(item.pid)
      this.$http.get("/home/precinct/findcourceByPrId?id="+item.pid).then(function (resp){
        // console.log(resp.data.result)
        if(resp.data.result!=null){
          that.$router.push({
            name: "precou",           //这个是通过路由跳转页面，跳转到：在router.js里的name为详情的页面
            params: {
              key: {pid:item.pid,cid:resp.data.result},                                    //key随便起名，下边对应就行
            },
          });
        }else {
          that.$router.push({
            name: "precou",           //这个是通过路由跳转页面，跳转到：在router.js里的name为详情的页面
            params: {
              key: {pid:item.pid},                                    //key随便起名，下边对应就行
            },
          });
        }
      })
    }
  }
}
</script>

<style scoped>

</style>